<template>

  <view class="order-detail-wrapper">
    <view class="order-header">
      <view v-if="!!orderDetail.memberContactId" class="order-address">
        <image class="address-logo" src="https://img.thumbrary.com/address-logo.png" />
        <view class="order-name">
          <text class="name">{{orderDetail.memberContactName}}</text>
          <text>{{orderDetail.memberContactPhone}}</text>
        </view>
        <view class="common-flex-between address-wrapper" @tap="editAddress">
          <view class="address">{{orderDetail.memberContactDetail}}</view>
          <text class="icon-arrow-right icon-btn" />
        </view>
      </view>
      <view v-else class="no-address" @tap="editAddress">
        <text class="one one-add-round icon-btn" />
        <text>请添加收货信息</text>
      </view>
    </view>
    <view class="common-interval">
      <view class="borrow-detail-wrapper">
        <view class="common-title">
          <text class="common-title-line" /> 本次借阅共计{{orderDetail.booksHeadArr.length}}本
        </view>
        <view class="order-books">
          <view style="overflow-x: auto; overflow-y: hidden; width: 100%;">
            <view :style="{'width': (orderDetail.booksHeadArr.length + 1)*260+'rpx'}">
              <view class="recommend-item" v-for="(src, index) in orderDetail.booksHeadArr || []" :key="index">
                <image :src="src" />
              </view>
            </view>
          </view>
        </view>
        <view class="borrow-time common-flex-between">
          <text class="title">借阅时间</text>
          <text class="time">{{ (orderDetail.startTime*1 || parseInt(new Date().getTime()/1000)) | formatTime }}至{{ orderDetail.endTime | formatTime }}</text>
        </view>
        <view class="order-message">
          <view class="title">订单留言</view>
          <textarea class="uni-input"
                    v-model="message"
                    maxlength="40"
                    placeholder-class="placeholder"
                    placeholder="填写内容需要与平台协商并确认，40字以内" />
        </view>
      </view>
      <view class="borrow-detail-wrapper change-payment">
        <view class="common-title">
          <text class="common-title-line" /> 选择支付方式
        </view>
        <view class="borrow-time common-flex-between">
          <text class="title">当前选择会员卡</text>
          <view>
            <text class="time">{{orderDetail.vipCardMemberLogName}}</text>
            <text class="change-vip" @tap="changeVipCard">
                              切换
                              <text class="icon-arrow-right icon-btn"/>
                          </text>
          </view>
        </view>
        <view class="tips">
          使用说明：<br/>1.会员卡的次数或者时长用完后，所有订单结算完成，押金可以手动提现。<br/>2.仅支持会员卡下单，每次下单消耗一次机会，同时最多可借{{maxBookNum}}本。
        </view>
      </view>
    </view>
    <view class="common-fixed fix">
      <view>
        <text style="color:#F82432;">合计：</text>{{orderDetail.booksNum}}个书位
      </view>
      <text class="common-bottom-btn" @tap="borrowHandle">确认借阅</text>
    </view>
  </view>

</template>

<script>

  import service from '@/service';
  import {getUserVipInfo, getShoppingNum} from '@/util/commonFn'
  import { mapGetters } from 'vuex';
  import { dateFmt } from '@/util/utils';
  export default {
    name: 'orderDetail',
    data() {
      return {
        recommondData: [],
        width: '690rpx',
        message: '',
        noAddress: false,
        orderId: '',
        orderDetail: {}
      }
    },
    computed: {
      ...mapGetters(['orderAddress', 'orderVipCard', 'maxBookNum'])
    },
    methods: {
      // 切换会员卡
      changeVipCard() {
        uni.navigateTo({
          url: `/pagesMine/vip/vip-change?vipCardMemberLogId=${this.orderDetail.vipCardMemberLogId}&booksNum=${this.orderDetail.booksHeadArr.length}`
        })
      },
      putOrder(params){
        uni.showLoading({
          title: ''
        });
        service.mineService.booksOrder({
          data: params,
          success: res => {
            uni.hideLoading()
            if (res.code === 200) {
              uni.showToast({
                title: `修改成功`,
                duration: 2500,
                icon: 'none'
              })
            } else {
              uni.showToast({
                title: `${res.resultMsg}`,
                duration: 2500,
                icon: 'none'
              })
            }
          },
          fail: ()=>{
            uni.hideLoading();
          },
          method: 'PUT'
        })
      },
      borrowHandle() {
        uni.showLoading({
          title: ''
        })
        service.mineService.trueBooksOrder({
          data: {
            orderId: this.orderDetail.orderId
          },
          success: res => {
            uni.hideLoading();
            if (res.code === 200) {
              getUserVipInfo();
              getShoppingNum();
              uni.navigateTo({
                url: `/pagesMine/success/index?orderId=${this.orderDetail.orderId}`
              })
            } else {
              uni.showToast({
                title: `${res.resultMsg}`,
                duration: 2500,
                icon: 'none'
              })
            }
          },
          fail: ()=>{
            uni.hideLoading();
          }
        })
      },
      editAddress() {
        uni.navigateTo({
          url: `/pagesMine/address/address?type=choose&memberContactId=${this.orderDetail.memberContactId}`
        })
      },
      getOrderDetail(orderId) {
        uni.showLoading({
          title: ''
        })
        service.mineService.booksOrder({
          data: {
            orderId
          },
          success: res => {
            uni.hideLoading();
            if (res.code === 200) {
              this.orderDetail = res.result || {}
            } else {
              uni.showToast({
                title: `${res.resultMsg}`,
                duration: 2500,
                icon: 'none'
              })
            }
          },
          fail: ()=>{
            uni.hideLoading();
          },
          complete: () => {
          },
          method: 'GET'
        })
      }
    },
    watch: {
      orderAddress(newVal){
        this.orderDetail = {...this.orderDetail, ...newVal}
        this.putOrder({
          orderId: this.orderDetail.orderId,
          memberContactId: this.orderDetail.memberContactId
        })
      },
      orderVipCard(newVal){
        this.orderDetail = {...this.orderDetail, ...newVal}
        this.putOrder({
          orderId: this.orderDetail.orderId,
          vipCardMemberLogId: this.orderDetail.vipCardMemberLogId
        })
      }
    },
    onLoad(params) {
      let { orderId } = params
      this.orderId = orderId;
      this.getOrderDetail(orderId)
    },
    mounted() {},
    filters: {
      formatTime(value){
        if(Number(value) === 0) {
          value = new Date().getTime()
        } else{
          value = Number(value+'000')
        }
        return dateFmt(value , 'yyyy-MM-dd')
      },
    }
  }

</script>

<style scoped lang="scss">

  .order-detail-wrapper {
    padding-bottom: 130rpx;
    .order-header {
      height: 270rpx;
      position: relative;
      background: rgba(43, 168, 252, 1);
      margin-bottom: 120rpx;
      .order-address,
      .no-address {
        position: absolute;
        background: #fff;
        z-index: 1;
        top: 182rpx;
        width: 690rpx;
        left: 30rpx;
        box-shadow: 0rpx 3rpx 20rpx rgba(0, 0, 0, 0.06);
        border-radius: 10rpx;
        border-bottom: 4rpx solid rgba(43, 168, 252, 1);
      }
      .order-address {
        padding: 26rpx 20rpx 24rpx 76rpx;
        box-sizing: border-box;
        min-height: 140rpx;
        position: relative;
        .order-name {
          font-size: 32rpx;
          font-weight: bold;
          .name {
            margin-right: 37rpx;
          }
        }
        .address-logo{
          width: 46rpx;
          height: 46rpx;
          position: absolute;
          left: 20rpx;
          top: 78rpx;

        }
        .address-wrapper {
          font-size: 28rpx;
          line-height: 40rpx;
          margin-top: 14rpx;

          .address {
            flex: 0 0 476rpx;
          }
        }
      }
      .no-address {
        height: 140rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        .icon-btn {
          color: #2ba8fc;
          margin-right: 20rpx;
          font-size: 40rpx;
        }
      }
    }
    .borrow-detail-wrapper {
      background: #fff;
      box-shadow: 0rpx 3rpx 20rpx rgba(0, 0, 0, 0.06);
      border-radius: 10rpx;
      padding: 20rpx 20rpx 30rpx 34rpx;
      .order-books {
        height: 195rpx;
        width: 660rpx;
        overflow: hidden;
        .recommend-item {
          width: 260rpx;
          height: 195rpx;
          margin-right: 20rpx;
          float: left;
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .borrow-time {
      height: 80rpx;
      border-bottom: 1rpx solid rgba(229, 229, 229, 0.8);
      align-items: center;
      .title {
        font-size: 28rpx;
        font-weight: bold;
      }
      .time {
        font-size: 24rpx;
        color: #999999;
      }
    }
    .order-message {
      .title {
        height: 80rpx;
        line-height: 80rpx;
        font-size: 28rpx;
      }
      .uni-input {
        width: 652rpx;
        height: 151rpx;
        margin-left: -14rpx;
        background: #f9f9f9;
        padding: 30rpx 20rpx;
        box-sizing: border-box;
        font-size: 24rpx;
      }
      .placeholder {
        color: #999999;
      }
    }
    .change-payment {
      margin-top: 30rpx;
      .change-vip {
        margin-left: 30rpx;
        color: #2ba8fc;
        font-size: 24rpx;
      }
    }
    .tips {
      font-size: 24rpx;
      color: #999;
      line-height: 33rpx;
      margin-top: 20rpx;
    }
  }

</style>
